<template>
  <view class="package column">
    <view style="font-size: 36rpx;color: #333333;">{{orderInfo.status_text}}</view>
    <view style="color:#F06E02;margin:10rpx 0px;width:100%;">{{orderInfo.text}}</view>
    <view class="center">
      <view class="tops center" v-for="(item,index) in orderInfo.user_list">
        <text style="top:-25rpx;left:3rpx;" v-if="index===0" class="first">发起人</text>
        <image :src="item.driver_avatar" mode="" v-if="item.driver_name"></image>
        <uni-icons type="plusempty" size="30" v-else></uni-icons>
      </view>
      <view class="tops center" v-if="orderInfo.user_list&&orderInfo.user_list.length<2" @click="shares()">
        <uni-icons type="plusempty" size="30"></uni-icons>
      </view>
    </view>
    <view style="color:#666;font-size: 24rpx;">拼单活动说明：</view>
    <view style="color:#666;margin:10rpx 0px;width:100%;text-align: center;font-size: 24rpx;">{{orderInfo.shuoming}}
    </view>
  </view>
  <!-- 分享弹框 -->
  <uni-popup ref="share" type="top">
    <image :src="BGicon3" mode="" style="width:100rpx;height:100rpx;margin:100rpx 0px 20rpx 70%;"></image>
    <view style="color:#fff;text-align: center;width:100%;">点击右上角选择分享好友</view>
    <view style="color:#fff;text-align: center;width:100%;">参与拼单即可有机会获得蓝宝石奖励</view>
  </uni-popup>
</template>

<script setup lang="ts">
  import { navTo } from '@/utils/navigator';
  import { BGicon2, BGicon3 } from '@/utils/Static';
  import { ref } from 'vue';
  const props = defineProps({
    orderInfo: {
      type: Object,
      default: {},
    },
  });
  const share = ref(null)
  function shares() {
    share.value.open()
  }
</script>

<style scoped lang="less">
  .tops {
    width: 91rpx;
    height: 91rpx;
    background: #F4F4F4;
    border: 2px solid #F06E02;
    border-radius: 50%;
    position: relative;
    margin-top: 20rpx;
    justify-content: center;
    margin: 40rpx 20rpx 20rpx 0px;

    .first {
      width: 86rpx;
      height: 32rpx;
      background: linear-gradient(158deg, #F06E02, #F38813);
      border-radius: 15px;
      text-align: center;
      line-height: 30.6rpx;
      font-size: 20rpx;
      font-weight: 400;
      color: #FFFFFF;
      position: absolute;
      z-index: 2;
    }

    image {
      width: 91rpx;
      height: 91rpx;
      border-radius: 50%;
    }
  }
</style>